import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SliverGridWithMaxExtentDemo());
  }
}

class SliverGridWithMaxExtentDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SliverGrid With Max Cross Axis Extent")),
      body:
      SizedBox(width: 401,child:
      CustomScrollView(
        slivers: [
          SliverGrid(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0, // 每个项的最大宽度
              childAspectRatio: 1.0, // 宽高比为1：1
              mainAxisSpacing: 0.0, // 主轴方向的间距
              crossAxisSpacing: 0.0, // 交叉轴方向的间距
            ),
            delegate: SliverChildBuilderDelegate(
                  (context, index) {
                return Container(
                  color: Colors.blue[100 * (index % 9)],
                  child: Center(child: Text('Item $index')),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      )
      ),
    );
  }
}
